<template>
  <el-dialog v-model="isShow" draggable :width="720" :close-on-click-modal="false">
    <template #header>
      {{ data.title }}
    </template>
    <el-form :model="data">
      <div class="form-item-row">
        <el-form-item label="设备型号" :label-width="sLabel[0]">
          <el-input
            v-model="data.model"
            :disabled="data.flag == 'del'"
            style="width: 300px;"
          ></el-input>
        </el-form-item>
        <!-- <el-form-item>
          <el-tag
            :type="data.status == 0 ? 'success' : 'danger'"
            style="margin: 0 5px"
            >{{ data.status }}</el-tag
          >
        </el-form-item> -->
      </div>
      <div class="form-item-row">
        <el-form-item label="选择固件" :label-width="sLabel[0]">
          <el-select
            v-model="romName"
            filterable
            remote
            reserve-keyword
            placeholder="输入固件名称关键字查询"
            @click="getRoms('')"
            remote-show-suffix
            :remote-method="getRoms"
            :loading="loading"
            @change="romChange"
            :disabled="data.flag == 'del'"
          >
            <el-option
              v-for="item in romOptions"
              :key="item.Id"
              :label="item.firmware_name"
              :value="item.Id"
            />
          </el-select>
        </el-form-item>
      </div>
      <div class="form-item-row" v-if="!isNull(data.rom)">
        <el-form-item label="主板型号" :label-width="sLabel[0]">
          <el-tag size="large" type="error" style="font-size: 14px">{{data.rom.board.model}}</el-tag>
        </el-form-item>
        <el-form-item label="主板厂商" :label-width="sLabel[0]">
          <el-tag size="large" type="warning" style="font-size: 14px">{{data.rom.board.factory.factory}}</el-tag>
        </el-form-item>
      </div>
      <div class="form-item-row">
        <el-form-item label="型号详情" :label-width="sLabel[0]">
          <el-input
            v-model="data.detail"
            :disabled="data.flag == 'del'"
            style="width: 400px;"
          ></el-input>
        </el-form-item>
      </div>
      <div class="form-item-row" v-if="data.dtCreate != ''">
        <el-form-item label="创建时间" :label-width="sLabel[0]">
          <span class="label">{{ data.dtCreate }}</span>
        </el-form-item>
        <el-form-item label="操作员" :label-width="sLabel[1]">
          <span class="label">{{ data.operCreate }}</span>
        </el-form-item>
      </div>
      <div class="form-item-row" v-if="data.dtUpdate != ''">
        <el-form-item label="修改时间" :label-width="sLabel[0]">
          <span class="label">{{ data.dtUpdate }}</span>
        </el-form-item>
        <el-form-item label="操作员" :label-width="sLabel[1]">
          <span class="label">{{ data.operUpdate }}</span>
        </el-form-item>
      </div>
    </el-form>
    <template #footer>
      <div>
        <el-button @click="close()">取 消</el-button>
        <el-button v-if="data.flag == 'del'" type="danger" @click="msgBox('status',data.status == cStatus[0]?'停用此设备型号':'取消停用')">{{
          data.status == cStatus[0] ? "停 用" : "取消停用"
        }}</el-button>
        <el-button v-else type="primary" @click="done()" :loading="loading">确 定</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script>
import { getCurrentInstance, reactive, ref } from "vue-demi";
import http from "@/axios/http";
import util from "@/assets/js/util";
import { ElMessageBox, ElNotification } from "element-plus";
import mqtt from '@/assets/js/mqtt';
export default {
  setup(props, ctx) {
    const Global = getCurrentInstance().proxy
    let user = reactive({
      id: Global.$var.user.id,
      username: Global.$var.user.username,
      power: Global.$var.user.power,
    });

    function mqttOnMsg() {
      mqtt.onMsg((t, m) => {
        loading.value = false;
        let r = JSON.parse(m);
        if (r.data.returnCode == 10000) {
          let d = r.data.data;
          if (r.msgType == 160 || r.msgType == 162) {
          //console.log(d)
            ctx.emit("done", data);
            isShow.value = false;
          }
          if (r.msgType == 155) {
          //console.log(d)
            romOptions.value = d;
          }
        }
      });
    }

    let cStatus = ref(Global.$const.STATUS_DATA);
    let sLabel = ref(["150px", "80px", "450px"]);
    let isShow = ref(false);
    let data = reactive({
      flag: "",
      title: "",
      id: "",
      model: "",
      detail: '',
      rom: '',
      dtCreate: "",
      operCreate: "",
      dtUpdate: "",
      operUpdate: "",
    });
    let loading = ref(false)
    function open(d) {
    //console.log(d)
      mqttOnMsg()
      romName.value = ''
      data.flag = d.flag;
      if (d.flag == "add") {
        data.title = "新建设备型号";
        data.id = "";
        data.model = "";
        data.detail = "";
        data.rom = '';
        // data.dtCreate = "";
        // data.operCreate = "";
        // data.dtUpdate = "";
        // data.operUpdate = "";
      } else {
        data.title = d.flag == "del" ? "设备型号状态" : "编辑设备型号";
        data.id = d.Id;
        data.model = d.model
        data.detail = d.detail
        data.rom = d.firmware
        romName.value = d.firmware.firmware_name
        // data.dtCreate = d.dtCreate;
        // data.operCreate = d.operCreate;
        // data.dtUpdate = d.dtUpdate;
        // data.operUpdate = d.operUpdate;
      }
      isShow.value = true;
    }
    function close() {
      isShow.value = false;
    }
    async function done() {
      let err = "";
      if (util.isNull(data.model)) err = "设备型号不能为空";
      else if (util.isNull(data.rom)) err = "请选择固件";
      if (!util.isNull(err)) {
        ElNotification({
          type: "warning",
          duration: 1500,
          title: "",
          message: err,
        });
        return;
      }
      loading.value = true;
      if (data.flag == "add" || data.flag == "edit") {
        let msgCode = 160;
        if (data.flag == "edit") msgCode = 162;
        let topic = mqtt.TOPIC_REQ + msgCode;
        let p = {};
        p.msgType = msgCode;
        p.clientId = user.id;
        p.userName = user.username;
        let m = {};
        if (data.flag == "edit") m.Id = data.id
        m.model = data.model
        m.detail = data.detail
        m.firmware_id = data.rom.Id
        p.message = {}
        p.message.equipmentmodel = JSON.stringify(m)
      //console.log('设备型号编辑：',JSON.stringify(p))
        mqtt.publish(topic,JSON.stringify(p))
      }
    }
    // 确认msgBox
    function msgBox(flag,msg,title='是否确认？',cbt='确认') {
      ElMessageBox.confirm(msg, title, {
        confirmButtonText: cbt,
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          if (flag == 'status') done()
        })
        .catch(() => {});
    }
    // 查询固件
    let romName = ref("")
    let romOptions = ref([])
    function getRoms(query) {
      let msgCode = 155;
      let topic = mqtt.TOPIC_REQ + msgCode;
      let g = {};
      g.msgType = msgCode;
      g.clientId = user.id;
      g.userName = user.username;
      let m = {};
      m.firmware_name = query
      m.factory = ''
      m.model = ''
      m.edition = ''
      m.version = ''
      m.status = 0
      m.indexPage = 1;
      m.pageSize = 10;
      g.message = m;
    //console.log(g)
      mqtt.publish(topic, JSON.stringify(g));
    }
    function romChange(e) {
      let ro = romOptions.value;
      for (let i in ro) {
        if (e == ro[i].Id) {
          data.rom = ro[i];
        }
      }  
    }

    function isNull(v) {
      return util.isNull(v)
    }

    return {
      user,cStatus,sLabel,isShow,data,loading,open,close,done,msgBox,romName,romOptions,getRoms,romChange,
      isNull
    };
  },
};
</script>

<style lang="scss" scoped>
.form-item-row {
  display: flex;
  flex-direction: row;
  .label {
    background-color: $color-primary-away;
    // border: 1px solid $color-primary-light;
    padding: 0px 15px;
    border-radius: 1px;
  }
}
.rom-version{
  .item{
    display: flex;
    flex-direction: row;
    .code{
      width: 100px;
      margin-top: 5px;
      margin-right: 5px;
      cursor: pointer;
    }
    .name{
      width: 200px;
      margin-top: 5px;
      margin-right: 5px;
      .el-text{
        width: 180px;
      }
    }
    .btn{
      margin-top: 5px;
      margin-left: 5px;
    }
  }
}
</style>